<template>
    <div class="container">
        <my-header class="header"></my-header>
        <el-main>
            <el-card class="main-card" shadow="never">
                <notice></notice>
                <hot :swiperList="swiperList" :newest="newest"></hot>
                <my-section v-for="item in sections" :key="item.id" :name="item.name" class="my-section" @click.native="handleSectionClick(item.id,item.name)"></my-section>
            </el-card>
        </el-main>
    </div>
</template>
<script>
import MyHeader from "../../components/MyHeader"
import Notice from "../Index/components/Notice"
import MySection from "../Index/components/MySection"
import Hot from "../Index/components/Hot"
import axios from 'axios'
import getUrl from "../../assets/js/getPath"

export default {
    name:'Index',
    components:{
        MyHeader:MyHeader,
        Notice:Notice,
        MySection:MySection,
        Hot:Hot
    },
    data(){
        return {
            sections:[
                {name:'西大新闻',id:'001'},
                {name:'学习园地',id:'002'},
                {name:'科研成果',id:'003'},
                {name:'考研专区',id:'004'},
                {name:'考公专区',id:'005'},
                {name:'就业专区',id:'006'},
                {name:'篮球专区',id:'007'}
            ],
            swiperList:[
                {title:"1",id:"001",url:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1649557303,3728852234&fm=26&gp=0.jpg"},
                {title:"2",id:"002",url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2520944040,1038100926&fm=26&gp=0.jpg"},
                {title:"2",id:"003",url:"https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1852256998,2277193394&fm=26&gp=0.jpg"},
            ],
            newest:[
                {title:"巴啦啦小魔仙1",sectionID:'1',postID:'00001',sectionName:"西大新闻"},
                {title:"巴啦啦小魔仙2",sectionID:'2',postID:'00002',sectionName:"西大新闻"},
                {title:"巴啦啦小魔仙3",sectionID:'3',postId:'00003',sectionName:"西大新闻"},
                {title:"巴啦啦小魔仙3",sectionID:'3',postId:'00003',sectionName:"西大新闻"},
                {title:"巴啦啦小魔仙3",sectionID:'3',postId:'00003',sectionName:"西大新闻"},
            ]
        }
    },
    created(){
        this.getSectionList();
    },
    methods:{
        handleSectionClick(id,name){
            this.$router.push({ path: 'List', query: { sectionId: id,sectionName:name}});
        },
        getSectionList:async function(){
            let url = getUrl('index');
            try{
                const {data:res} = await axios.get(url);
                if(res.meta.status !== 200){
                    return this.$message.error(res.meta.msg);
                }else{
                    this.sections = res.data.sectionList;
                    this.newest = res.data.newest;
                    //console.log(res);
                    //this.$message.success(res.meta.msg);
                }
            }catch(e){
                this.$message.error("请求出错");
            }
        },
    }
}
</script>
<style lang="scss" scoped>
html,body{
    width:100%;
    height: 100%;
}
.container{
    width: 100%;
    background-color: #eee;
}
.main-card{
    width:80%;
    margin: 0 auto;
    text-align: left;
    // display: flex;
    // justify-content: flex-start;
}
.my-section{
    display: inline-block;
}
</style>